"use client";

import { useState } from "react";
import { Folder, File, MoreHorizontal, Copy, Trash2, Move, ExternalLink } from "lucide-react";
import { Button } from "./button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu";
import { FileItem } from "@/hooks/useFiles";

interface FileItemProps {
    item: FileItem;
    onNavigate?: (path: string) => void;
    onDelete?: (path: string, type: "file" | "directory") => void;
    onCopyLink?: (path: string) => void;
    onMove?: (sourcePath: string, targetPath: string, type: "file" | "directory") => void;
}

export function FileItemComponent({ item, onNavigate, onDelete, onCopyLink, onMove }: FileItemProps) {
    const [isHovered, setIsHovered] = useState(false);

    const handleClick = () => {
        if (item.type === "directory") {
            onNavigate?.(item.path);
        }
    };

    const formatFileSize = (bytes?: number) => {
        if (!bytes) return "";
        const sizes = ["Bytes", "KB", "MB", "GB"];
        const i = Math.floor(Math.log(bytes) / Math.log(1024));
        return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
    };

    const formatDate = (date: Date) => {
        return new Intl.DateTimeFormat("zh-CN", {
            year: "numeric",
            month: "short",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
        }).format(new Date(date));
    };

    return (
        <div
            className={`group relative flex items-center space-x-3 rounded-lg p-3 transition-colors hover:bg-accent`}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            onClick={handleClick}
        >
            <div className="flex-shrink-0">{item.type === "directory" ? <Folder className="h-5 w-5 text-blue-500" /> : <File className="h-5 w-5 text-green-500" />}</div>

            <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-foreground truncate">{item.name}</p>
                <div className="flex items-center space-x-2 text-xs text-muted-foreground">
                    {item.type === "file" && item.size && <span>{formatFileSize(item.size)}</span>}
                    <span>{formatDate(item.modifiedTime)}</span>
                </div>
            </div>

            <div className={`flex-shrink-0 transition-opacity ${isHovered ? "opacity-100" : "opacity-0"}`}>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                            <MoreHorizontal className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuItem
                            onClick={() => {
                                window.open(`/view?model=${encodeURIComponent(item.path)}`, "_blank");
                            }}
                        >
                            <ExternalLink className="mr-2 h-4 w-4" />
                            新窗口打开
                        </DropdownMenuItem>
                        {item.type === "file" && onCopyLink && (
                            <DropdownMenuItem onClick={() => onCopyLink?.(item.path)}>
                                <Copy className="mr-2 h-4 w-4" />
                                复制链接
                            </DropdownMenuItem>
                        )}
                        {onMove && (
                            <DropdownMenuItem onClick={() => onMove?.(item.path, "", item.type)}>
                                <Move className="mr-2 h-4 w-4" />
                                移动到
                            </DropdownMenuItem>
                        )}
                        {onDelete && (
                            <DropdownMenuItem onClick={() => onDelete?.(item.path, item.type)} className="text-destructive focus:text-destructive">
                                <Trash2 className="mr-2 h-4 w-4" />
                                删除
                            </DropdownMenuItem>
                        )}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    );
}
